<template>
  <!-- 出库申请单 -->
  <view class="deliveryApplicationForm">
    <view class="top">
      <van-cell-group>
        <van-field 
          :value="form.outboundInfo.applyname" 
          label="领料人:"
        ></van-field>
        <van-field 
          :value="form.outboundInfo.outbound_name" 
          label="保管员:"
        ></van-field>
        <van-field
          :value="form.outboundInfo.principal_signature"
          label="食堂负责人："
        ></van-field>
      </van-cell-group>
    </view>
    <view class="content">
      <view class="title flexb">
        <view class="title_left f26">采购商品明细</view>
        <view class="title_right flexb f26">
          <view style="margin-right: 20rpx">共
            <text>{{ form.purchasegoodsinfo.length }}</text>件商品
          </view>
          <view>总计：
            <text>
              ￥{{form.purchasegoodsinfo.reduce((prev, item) => prev * 1 + item.total_money * 1, 0)}}
            </text>
          </view>
        </view>
      </view>
      <view class="list_box">
        <view class="list_item" v-for="(item, index) in form.purchasegoodsinfo" :key="index">
          <view class="list_item_title flexb">
            <view class="name flexAI">
              <view class="point br50 mr10"></view>
              <view>品名：{{ item.goods_name }}</view>
            </view>
            <view> 数量：{{ item.goods_num }} </view>
          </view>
          <view class="type-subtotal flexb">
            <view> 使用类型 ：{{ item.use_type_name }}</view>
            <view> 小计：<text>￥{{ item.total_money }}</text></view>
          </view>
        </view>
      </view>
      <view class="btn_style flexJC">
        <van-button type="default" @click="goBack">返回</van-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        outbound_sn: "", //出库单号
        outboundInfo: {},
        purchasegoodsinfo: [],
      },
    };
  },

  // 监听页面加载，该钩子被调用时
  onLoad(option) {
    this.form.outbound_sn = option.outbound_sn;
  },
  methods: {
    /*返回*/ 
    goBack() {
      uni.navigateBack({
        delta: 1, //返回上一级页面
      });
    },
    /*申请单列表*/ 
    async outApplyorder() {
      let res = await this.$ajax.outApplyorder({
        outbound_sn: this.form.outbound_sn,
      });
      if (res.code == 1) {
        this.form.outboundInfo = res.data.outboundInfo;
        this.form.purchasegoodsinfo = res.data.purchasegoodsinfo;
        console.log(this.form.purchasegoodsinfo,'this.form.purchasegoodsinfo');
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },
  },

  mounted() {
    this.outApplyorder();
  },

  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {
    uni.setNavigationBarTitle({
      title: "出库申请单",
    });
  },

  // 监听用户下拉动作，一般用于下拉刷新
  onPullDownRefresh() {},

  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
};
</script>

<style lang="scss">
.deliveryApplicationForm {
  width: 100%;
  height: 100vh;
  max-height: 100%;
  background: rgba(244, 244, 244, 1);
  padding-bottom: 50rpx;
  .top {
    background: rgba(255, 255, 255, 1);
  }
  .content {
    .title {
      // display: flex;
      // justify-content: space-between;
      padding: 20rpx 30rpx;

      .title_left {
        color: rgba(153, 153, 153, 1);
        // font-size: 26rpx;
        font-family: SourceHanSansSC-regular;
      }

      .title_right {
        // display: flex;
        // justify-content: space-between;
        color: rgba(153, 153, 153, 1);
        // font-size: 26rpx;
        font-family: SourceHanSansSC-regular;

        text {
          color: red;
          font-weight: bold;
        }
      }
    }
    .list_box {
      .list_item {
        width: 100%;
        height: 160rpx;
        line-height: 55rpx;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        font-size: 28rpx;
        padding: 20rpx 20rpx;
        font-family: SourceHanSansSC-regular;
        border-bottom: 0.5rpx solid #e7e4e4;

        .list_item_title {
          // display: flex;
          // justify-content: space-between;
          .name {
            // display: flex;
            // align-items: center;
            color: rgba(16, 16, 16, 1);
            font-size: 28rpx;
            font-family: SourceHanSansSC-bold;
            
            font-weight: bold;

            .point {
              width: 15rpx;
              height: 15rpx;
              // border-radius: 50%;
              background: rgba(98, 177, 88, 1);
              // margin-right: 10rpx;
            }
          }
        }
        .type-subtotal {
          // display: flex;
          // justify-content: space-between;
          text {
            color: red;
          }
        }
      }
    }
    .btn_style {
      // display: flex;
      // justify-content: center;
      margin-top: 52rpx;
      .van-button {
        width: 180rpx;
        height: 72rpx;
        border-radius: 66rpx;
        border: 0.5rpx solid rgba(187, 187, 187, 1);
        color: rgba(102, 102, 102, 1);
        // font-size: 28rpx;
        // text-align: center;
        font-family: Microsoft Yahei;
      }
    }
  }
}
</style>